<template>
  <div :style="{ background: 'white', padding: '0 10px'}">
    <div class="table-operator">
      <a-row :gutter="24">
        <a-col :md="8">
          <div class="table-operator">
            <span style="margin-left: 20px">实际采购清单</span>
            <a-button
              type="primary"
              icon="plus"
              style="margin-left: 20px"
              @click="productAdd">关联合同</a-button>
          </div>
        </a-col>
        <a-col :md="8">
        </a-col>
        <a-col :md="8">
          <span style="margin-right: 30px;font-size: 18px; font-weight: bold; float: right">总金额: {{ contractInfo.money }}</span>
        </a-col>
      </a-row>
    </div>
    <div>
      <a-spin :spinning="loading">
        <a-table
          ref="productTable"
          size="default"
          rowKey="goodsId"
          :style="{ background: 'white'}"
          :columns="productColumns"
          :dataSource="products"
          :pagination="false">
          <span
            slot="serial"
            slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <span
            slot="action"
            slot-scope="text, record">
            <template>
              <a @click="handleEdit(record)">配置</a>
              <a-divider type="vertical" />
              <a @click="handleDelete(record)">移除</a>
            </template>
          </span>
        </a-table>
      </a-spin>
    </div>
    <buy-list-desc
      ref="productModal"
      :visible="visible"
      :contracts="contracts"
      :loading="confirmLoading"
      @cancel="handleCancel"
      @ok="handleOk" />
  </div>
</template>

<script>
// getGoodsList, saveGoods, updateGoods, deleteGoods
import { supplierInfo, getGoodsSelect, saveGoods, updateGoods, deleteGoods } from '@/api/manage'
import { productColumns } from '../config'
import { STable } from '@/components'
import BuyListDesc from './BuyListDesc'
import { message, Modal } from 'ant-design-vue'

export default {
  name: 'BuyList',
  props: {
    contractInfo: {
      type: Object,
      default: null
    }
  },
  components: {
    STable,
    BuyListDesc
  },
  data () {
    this.productColumns = productColumns
    return {
      isAdd: false,
      isEdit: false,
      visible: false,
      loading: false,
      suppliers: undefined,
      confirmLoading: false,
      products: undefined,
      prorecord: undefined,
      goods: undefined
    }
  },
  created () {},
  mounted () {
    // this.$refs.productTable.refresh()
    this.projectId = this.contractInfo.projectId
    this.loading = true
    getGoodsSelect({ type: 2, projectId: this.projectId }).then(res => {
      this.products = res.data
      this.loading = false
    })
    supplierInfo({ page: 1, limit: 9999 }).then(res => {
      this.suppliers = res.data
    })
  },
  methods: {
    productAdd () {
      this.visible = true
      this.isAdd = true
      this.isEdit = false
      this.$nextTick(() => {
        this.$refs.productModal.form.setFieldsValue({ type: 2 })
      })
    },
    handleEdit (record) {
      this.visible = true
      this.isEdit = true
      this.isAdd = false
      const form = this.$refs.productModal.form
      this.goods = record
      this.$nextTick(() => {
        form.setFieldsValue(record)
      })
    },
    handleDelete (record) {
      Modal.confirm({
        title: '删除采购清单',
        content: '删除后数据不再展示，需要查看请联系开发',
        onOk: () => {
          this.loading = true
          deleteGoods({ goodsId: record.goodsId }).then(() => {
            message.success('删除成功')
            getGoodsSelect({ type: 2, contractId: this.contractId }).then(res => {
              this.products = res.data
              this.loading = false
            })
          })
        }
      })
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.$refs.productModal.form.resetFields()
    },
    handleOk () {
      const form = this.$refs.productModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          if (this.isAdd) {
            saveGoods(Object.assign({}, values, { type: 2, contractId: this.contractInfo.contractId }))
              .then(res => {
                this.visible = false
                message.success('新增成功')
                form.resetFields()
              })
              .then(() => {
                this.loading = true
                getGoodsSelect({ type: 2, contractId: this.contractId }).then(res => {
                  this.products = res.data
                  this.loading = false
                })
              })
              .finally(() => {
                this.confirmLoading = false
              })
          } else {
            updateGoods(
              Object.assign({}, values, {
                goodsId: this.goods.goodsId,
                type: 2,
                contractId: this.contractInfo.contractId
              })
            )
              .then(res => {
                this.visible = false
                message.success('修改成功')
                form.resetFields()
              })
              .then(() => {
                this.loading = true
                getGoodsSelect({ type: 2, contractId: this.contractId }).then(res => {
                  this.products = res.data
                  this.loading = false
                })
              })
              .finally(() => {
                this.confirmLoading = false
              })
          }
        }
      })
    },
    tableCustomRow (record, index) {
      return {
        on: {
          click: event => {
            this.prorecord = record
          }
        }
      }
    }
  }
}
</script>
